<template>
  <div class="productCateList">
     <div class="addproduct">
			<div class="updataproductTitle">添加商品分类</div>
      <div class="addproductCateinfo">
        <el-form
          :model="listQuery"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
				<el-form-item label="品牌名称" prop="name">
            <el-input
              class="long-input"
              v-model="listQuery.name"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
					<el-form-item label="品牌首字母" prop="first_letter">
            <el-input
              class="long-input"
              v-model="listQuery.first_letter"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" prop="logo">
            <el-input
              class="long-input"
              v-model="listQuery.logo"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
					<el-form-item label="品牌专区大图" prop="big_pic">
            <el-input
              class="long-input"
              v-model="listQuery.big_pic"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
					<el-form-item label="品牌故事" prop="brand_story">
            <el-input
              class="long-input"
              v-model="listQuery.brand_story"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
					<el-form-item label="排序" prop="sort">
            <el-input
              class="long-input"
              v-model="listQuery.sort"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
					<el-form-item label="是否显示" prop="show_status">
            <template>
							<el-radio-group v-model="listQuery.show_status">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</template>
          </el-form-item>
					<el-form-item label="品牌制造商" prop="factory_status">
            <template>
							<el-radio-group v-model="listQuery.factory_status">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
						<el-button @click="goback()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { insertProductBrandList } from "@/api/product"

export default {
  name: "CateAdd",
  data() {
    return {
      listQuery: {
				big_pic:"",
				brand_story:"",
				factory_status:"",
				first_letter:"",
				logo:"",
				name:"",
				show_status:"",
				sort:""
			},
      rules: {
        name: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10个字符", trigger: "blur" },
        ],
				logo:[
					{ required: true, message: "品牌LOGO不能为空", trigger: "blur" },
				]
      },
    };
  },
	methods: {
		submitForm(fromname){
			console.log(this.listQuery);
			this.$refs[fromname].validate((valid)=>{
				if(valid){
					insertProductBrandList(this.listQuery).then(res=>{
						if(res.status === 200){
							this.$message("添加成功 3秒后跳回品牌页");
							setTimeout(()=>{
								this.$router.push({name:"brand"})
							},3000)
						}
					})
				}else{
					console.log("添加失败");
				}
			})
		},
		goback:function(){
			this.$router.go(-1)
		}
	}
};
</script>

<style>
.addproductCateinfo{
	padding: 10px;
	width: 70%;
	margin-left: 10%;
	margin-top: 20px;
	border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.updataproductTitle{
	padding: 15px;
	width: 100%;
	border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	text-align: left;
	margin-top: 20px;
}

.el-form-item__content{
	text-align: left;
}

.long-input{
	width: 90%;
}
</style>